<template>
  <div class="nav-bar-fixed">
    <div class="nav-bar">
      <div class="nav-bar-left-continer">
        <div class="icon-toggle" @click="toggle">
          <i :class="hideLeft ? 'el-icon-s-fold' : 'el-icon-s-unfold'"></i>
        </div>
        <el-breadcrumb class="breadcrumb-container" separator="/">
          <el-breadcrumb-item v-for="item in breadcrumbList" :key="item.id">
            <!-- :to="index === 1 ? { path: '/index' } : null" -->
            {{ item.title }}
          </el-breadcrumb-item>
        </el-breadcrumb>
      </div>
      <div class="nav-bar-center">
        <img src="../assets/logo.png" alt="" />
        <span>“伴我汽车”管理平台</span>
      </div>
      <!-- <div class="nav-bar-info">
        <ul>
          <li>时间</li>
          <li>用户</li>
          <li>所属角色</li>
        </ul>
      </div> -->
      <div class="nav-bar-right-continer">
        <el-dropdown trigger="hover">
          <div class="avatar-box">
            <img src="../assets/img/avatar.gif" class="avatar-img" />
            <span class="avatar-name">ijieliu</span>
          </div>
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item divided>
              <span>修改密码</span>
            </el-dropdown-item>
            <el-dropdown-item divided>
              <span @click="logout">退出</span>
            </el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
      </div>
    </div>
    <div class="tags-view-container">
      <el-tag
        v-for="item in tagsViewList"
        :key="item.id"
        class="tags-view-item"
        :effect="currentMenuItem.id === item.id ? 'dark' : 'light'"
        :closable="item.id !== 'm-1'"
        @close="closeTagsViewItem(item)"
        @click="switchCurrentMenuItem(item)"
        >{{ item.title }}</el-tag
      >
    </div>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
export default {
  created() {
    console.log(this.currentMenuItem)
    console.log(this.breadcrumbList)
  },
  computed: {
    ...mapGetters({
      hideLeft: 'menu/getHideLeft',
      currentMenuItem: 'menu/getCurrentMenuItem',
      breadcrumbList: 'menu/getBreadcrumbList',
      tagsViewList: 'menu/getTagsViewList'
    })
  },
  methods: {
    toggle() {
      this.$store.commit('menu/setHideLeft', !this.hideLeft)
    },
    logout() {
      console.log('退出')
    },
    closeTagsViewItem(item) {
      this.$store.commit('menu/removeTagsViewItem', item)
      this.$router.push(this.currentMenuItem.path)
    },
    switchCurrentMenuItem(item) {
      this.$store.commit('menu/setBreadcrumbList', item)
      this.$store.commit('menu/setCurrentMenuItem', item)
      this.$router.push(item.path)
    }
  }
}
</script>
<style lang="less" scoped>
  .nav-bar-left-continer{
    width: 300px;
  }
  .nav-bar-center{
    width: 300px;
    font-size: 25px;
    font-weight: bold;
    color: black;
    display: flex;
    align-items: center;
    img{
      width: 30px;
      margin-right: 10px;
    }
  }
  .nav-bar-right-continer{
    width: 300px;
    text-align: right;
  }
  .nav-bar-info{
    ul{
      display: flex;
      li{
        margin: 15px 20px 0;
        font-size: 12px;
        color: black;
        list-style: none;
      }
    }
  }
</style>
